<template>
  <div>
    <!-- <h1>省份数据</h1> -->
    <div class="q1">
       <div class="q2">
      <span>全部省份</span>
      <i class="el-icon-caret-bottom"></i>
    </div>

    <div class="q3">
      <span class="q4">江苏</span>
      <ul class="q5">
        <li>当前通话总并发数  &emsp13;&emsp13;&emsp13;&emsp13;&emsp13;&emsp13;&emsp13;&emsp13;<span class="q6">0</span></li>
        <li>今日最高通话并发数 &emsp13;&emsp13;&emsp13;&emsp13;&emsp13;<span class="q6">0</span></li>
        <li>历史最高通话并发数 &emsp13;&emsp13;&emsp13;&emsp13;&emsp13;<span class="q6">0</span></li>
      </ul>

      <ul class="q7">
        <li>当前线路总并发数  &emsp13;&emsp13;&emsp13;&emsp13;&emsp13;&emsp13;&emsp13;&emsp13;<span class="q6">0</span> &emsp13;&emsp13;(电路0 网络0)</li>
        <li>今日最高线路并发数 &emsp13;&emsp13;&emsp13;&emsp13;&emsp13;<span class="q6">0</span> &emsp13;&emsp13;(电路0 网络0)</li>
        <li>历史最高线路并发数 &emsp13;&emsp13;&emsp13;&emsp13;&emsp13;<span class="q6">0</span> &emsp13;&emsp13;(电路0 网络0)</li>
      </ul>

    </div>


    <div class="q8">
      <span class="q4">上海</span>
      <ul class="q5">
        <li>当前通话总并发数  &emsp13;&emsp13;&emsp13;&emsp13;&emsp13;&emsp13;&emsp13;&emsp13;<span class="q6">0</span></li>
        <li>今日最高通话并发数 &emsp13;&emsp13;&emsp13;&emsp13;&emsp13;<span class="q6">0</span></li>
        <li>历史最高通话并发数 &emsp13;&emsp13;&emsp13;&emsp13;&emsp13;<span class="q6">0</span></li>
      </ul>

      <ul class="q7">
        <li>当前线路总并发数  &emsp13;&emsp13;&emsp13;&emsp13;&emsp13;&emsp13;&emsp13;&emsp13;<span class="q6">0</span> &emsp13;&emsp13;(电路0 网络0)</li>
        <li>今日最高线路并发数 &emsp13;&emsp13;&emsp13;&emsp13;&emsp13;<span class="q6">0</span> &emsp13;&emsp13;(电路0 网络0)</li>
        <li>历史最高线路并发数 &emsp13;&emsp13;&emsp13;&emsp13;&emsp13;<span class="q6">0</span> &emsp13;&emsp13;(电路0 网络0)</li>
      </ul>
    </div>



    <div class="q9">
      <span class="q4">浙江</span>
      <ul class="q5">
        <li>当前通话总并发数  &emsp13;&emsp13;&emsp13;&emsp13;&emsp13;&emsp13;&emsp13;&emsp13;<span class="q6">0</span></li>
        <li>今日最高通话并发数 &emsp13;&emsp13;&emsp13;&emsp13;&emsp13;<span class="q6">0</span></li>
        <li>历史最高通话并发数 &emsp13;&emsp13;&emsp13;&emsp13;&emsp13;<span class="q6">0</span></li>
      </ul>

      <ul class="q7">
        <li>当前线路总并发数  &emsp13;&emsp13;&emsp13;&emsp13;&emsp13;&emsp13;&emsp13;&emsp13;<span class="q6">0</span> &emsp13;&emsp13;(电路0 网络0)</li>
        <li>今日最高线路并发数 &emsp13;&emsp13;&emsp13;&emsp13;&emsp13;<span class="q6">0</span> &emsp13;&emsp13;(电路0 网络0)</li>
        <li>历史最高线路并发数 &emsp13;&emsp13;&emsp13;&emsp13;&emsp13;<span class="q6">0</span> &emsp13;&emsp13;(电路0 网络0)</li>
      </ul>
    </div>

    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {

    }
  },
  mounted() {

  },
  methods: {

  },
  computed: {

  },
}
</script>
<style lang='less' scoped>
.q1{
  width: 1200px;
  height: 580px;
  background-color: white;
  position: relative;
  left: 40px;
  top: 20px;
}
.q2{
  width: 170px;
  height: 40px;
  background-color: rgb(233,243,251);
  position: relative;
  left: 20px;
  top: 20px;
}
.q2 span{
  position: absolute;
  left: 15px;
  top: 7px;
  font-size: 15px;
  color: rgb(61,158,255);
}
.el-icon-caret-bottom{
  position: absolute;
  right: 10px;
  top: 10px;
  color: rgb(34,157,255);
}
.q3{
  width: 1150px;
  height: 160px;
  // background-color: aqua;
  border-bottom: 1px solid rgb(216, 218, 220);
  position: relative;
  top: 30px;
  left: 20px;
}
.q4{
  font-size: 17px;
  position: absolute;
  left: 30px;
  top: 15px;
}
li{
  list-style: none;
}
.q5{
  position: absolute;
  top: 40px;
  left: -10px;
  color: rgb(152,181,205);
}
.q6{
  color: black;
}
.q7{
  position: absolute;
  right: 500px;
  top: 40px;
  color: rgb(152,181,205);
}
.q8{
  width: 1150px;
  height: 160px;
  // background-color: aqua;
  border-bottom: 1px solid rgb(216, 218, 220);
  position: relative;
  top: 30px;
  left: 20px;
}
.q9{
  width: 1150px;
  height: 160px;
  // background-color: aqua;
  border-bottom: 1px solid rgb(216, 218, 220);
  position: relative;
  top: 30px;
  left: 20px;
}
</style>